@import "variable.less";
@import "mixins.less";
.plumb-flow{
	height: 800px;
	.flow-paper{
		.action-node{
			width: auto !important;
			height: auto !important;
			background: #556462;
			border-radius: 5px;
			box-sizing: border-box;
			padding: 3px 5px;
			line-height: 1.2;
			text-align: left;
			color: #ecead5;
			i{
				font-size: 27px;
				margin-right: 1px;
				float: left;
			}
			.n-text{
				display: block;
				float: left;
				min-width: 60px;
				min-height: 20px;
				padding: 4px 4px 3px;
				font-size: 14px;
				line-height: 1.3;
			}
		}
	}
	.flow-paper{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.flow-view-box{
		height: 100%;
		width: 100%;
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.panel-ele {
		background :#587573;
		width: 64px;
		height: 100%;
		overflow: hidden;
		li{
			width: 38px;
			height: 38px;
			font-size: 38px;
			color: #acd8d5;
			text-align: center;
			line-height: 38px;
			margin: 15px auto;
			position: relative;
			user-select: none;
		}
		i{
			user-select: none;
		}
		.dragCopy{
			position: absolute;
			margin: 0;
			cursor: move;
		}
	}
	.flow-node{
		width: 38px;
		height: 38px;
		position: absolute;
		line-height: 1;
		text-align: center;
		z-index: 2;
		.c-handle{
			font-size: 16px;
			position: absolute;
			top: -8px;
			right: -8px;
			background: none;
			border: none;
			padding: 0;
			color: #bdbd5e;
			cursor: pointer;
			opacity: 0;
			transition: opacity 0.1s;
		}
		.m-handle{
			cursor: move;
		}
		&.current{
			box-shadow: 0 0 8px 2px #61d8f3;
		}
		&:hover,&.current{
			.c-handle{
				opacity: 1;
			}
		}
		&.cursor-hand{
			cursor: pointer;
		}
		i{
			font-size: 38px;
			color: #acd8d5;
		}
	}
	.tool-bar{
		padding: 10px 20px;
		&:after{
			clear: both;
			display: block;
			content: '';
		}
		li{
			height: 25px;
			width: 25px;
			line-height: 25px;
			float: left;
			margin-right: 10px;
			color: #6a6b3f;
			font-size: 18px;
			text-align: center;
			background: rgba(185, 183, 93, 0.89);
			cursor: pointer;
			border-radius: 20px;
			&.active{
				color: yellow;
			}
			&:last-child{
				margin-right:0;
			}
		}
	}
	.fa.i-small{
		transform: scale(0.85);
	}
	.flow-node {
		.ac-delete {
			right: 10px;
			top: 100%;
		}
		&.n-getway{
			background: none;
			width: 70px !important;
			height: 70px !important;
			position: relative;
			&:after{
				background: #556462;
				content: "";
				width: 70%;
				height: 70%;
				position: absolute;
				left:50%;
				top:50%;
				transform:translate(-50%, -50%)  rotate(-45deg);
			}
			.n-label{
				position: relative;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: inline-block;
			}
		}
	}
	.jtk-overlay{
		background: #fff;
		padding: 0 3px;
	}
}